<div class="row">
            <div class="col-xs-12">

            </div>
        </div>
        <div class="hr hr-double hr-dotted hr10"></div>
        <div class="row">
            <div class="col-xs-12">

                <button class="btn btn-primary text-center" data-toggle="modal" data-target="#addModal"><i
                        class="ace-icon fa fa-plus bigger-110"></i></button>

                <!-- TODO -->
                <table id="menu-management-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>编号</th>
                        <th>PRP缩写</th>
                        <th>PRP阶段名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </td>

                        <td>
                            01
                        </td>
                        <td>prp1</td>

                        <td>测试prp阶段1</td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-success" data-toggle="modal" data-target="#viewModal">
                                    <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                </button>

                                <button class="btn btn-xs btn-info">
                                    <i class="ace-icon fa fa-pencil bigger-120" data-toggle="modal"
                                       data-target="#editModal"></i>
                                </button>

                                <button class="btn btn-xs btn-danger">
                                    <i class="ace-icon fa fa-trash-o bigger-120" data-toggle="modal"
                                       data-target="#delModal"></i>
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                        <li>
                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
													<span class="blue">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
													<span class="green">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
													<span class="red">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
                <!-- TODO add buttons -->
                <em>这里应该还有一些按钮。对checkbox进行操作</em>
            </div>
            <!-- /.span -->
        </div>
        
        
        
        
 <!--modals -->
<div class="prpr_add_modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addModalLabel">添加一个新PRP阶段：</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="addModalInputMenuShort" class="col-sm-2 control-label ">PRP缩写</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control ajax_prp_add_short" id="addModalInputMenuShort" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addModalInputMenuName" class="col-sm-2 control-label">PRP名称</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control ajax_prp_add_title" id="addModalInputMenuName" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addModalInputMenuNote" class="col-sm-2 control-label ">备注</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control ajax_prp_add_note" id="addModalInputMenuNote" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <!-- TODO local / serverside varification -->
                        验证缩写和备注与系统中的存在的数据不重复。
                        验证备注字数小于50。
                        使用字数提醒插件。
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary ajax_prp_add_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="prpr_view_modal modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="viewModalLabel">查看PRP阶段详情：</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="viewModalInputMenuShort" class="col-sm-2 control-label">PRP缩写</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="viewModalInputMenuShort" placeholder="prp1"
                                   value="prp1" readonly="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="viewModalInputMenuName" class="col-sm-2 control-label">PRP名称</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control" id="viewModalInputMenuName" placeholder="测试prp阶段1"
                                   value="测试prp阶段1" readonly="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="viewModalInputMenuNote" class="col-sm-2 control-label">备注</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control" id="viewModalInputMenuNote" placeholder=""
                                   readonly="">
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default prp_view_close_btn" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- update prp modal-->
<div class="prpr_update_modal modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">修改此PRP阶段：</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="editModalInputMenuShort" class="col-sm-2 control-label ">PRP缩写</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control ajax_prp_update_prp_short" id="editModalInputMenuShort " placeholder="prp1"
                                   value="prp1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="editModalInputMenuName" class="col-sm-2 control-label ">PRP名称</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control ajax_prp_update_prp_title" id="editModalInputMenuName" placeholder="测试prp阶段1"
                                   value="测试prp阶段1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="editModalInputMenuNote" class="col-sm-2 control-label">备注</label>

                        <div class="col-sm-10">
                            <input type="url" class="form-control ajax_prp_update_prp_note" id="editModalInputMenuNote" placeholder="" value>
                        </div>
                    </div>
                    <div class="form-group">
                        <!-- TODO local / serverside varification -->
                        验证缩写和备注与系统中的存在的数据不重复。
                        验证备注字数小于50。
                        使用字数提醒插件。
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary ajax_prp_update_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<div class="prpr_delete_modal modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="delModalLabel">删除此PRP阶段？</h4>
            </div>
            <div class="modal-body">
                确定吗？
                <hr/>
                <div class="form-group">
                    <!-- TODO serverside varification -->
                    验证此PRP是否被使用。如果使用了，自动禁用“是”按钮并输出引用对象。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                <button type="button" class="btn btn-primary ajax_prp_delete_btn">是</button>
            </div>
        </div>
    </div>
</div>


 <script type="text/javascript">
 	 $(function(){
 	 		//添加jrp阶段操作
 	 		$(".ajax_prp_add_btn").on("click",function(){
 	 			var ajax_prp_add_short = $(".ajax_prp_add_short").val();
 	 			var ajax_prp_add_title = $(".ajax_prp_add_title").val();
 	 			var ajax_prp_add_note = $(".ajax_prp_add_note").val();
 	 			
				if(ajax_prp_add_short == ""){
					alert("prp缩写不能为空");
				}else if(ajax_prp_add_title==""){
					alert("prp名称不能为空");
				}
				else{
					//发送add prp请求
					$.ajax({
						//发送方法
						type:"GET",
						//发送url
						url:"vmrequest/prp_search.html",
						//成果返回后
						success: function(data) {
							alert("添加prp阶段成功");
							// $(".holy_container").append(data);
							$("#addModal").modal("hide");
						}
					});
				}
			});
			
			//update action
			$(".ajax_prp_update_btn").on("click",function(){
 	 			var ajax_prp_update_prp_short = $(".ajax_prp_update_prp_short").val();
 	 			var ajax_prp_update_prp_title = $(".ajax_prp_update_prp_title").val();
 	 			var ajax_prp_update_prp_note = $(".ajax_prp_update_prp_note").val();
 	 		
				if(ajax_prp_update_prp_short == ""){
					alert("prp缩写不能为空");
				}else if(ajax_prp_update_prp_title==""){
					alert("prp名称不能为空");
				}
				else{
					//发送add prp请求
					$.ajax({
						//发送方法
						type:"GET",
						//发送url
						url:"vmrequest/prp_search.html",
						//成果返回后
						success: function(data) {
							alert("更改prp阶段成功");
							// $(".holy_container").append(data);
							$("#editModal").modal("hide");
						}
					});
				}
			});
			
			//update action
			$(".ajax_prp_delete_btn").on("click",function(){
				$.ajax({
					//发送方法
					type:"GET",
					//发送url
					url:"vmrequest/prp_search.html",
					//成果返回后
					success: function(data) {
						alert("删除prp阶段成功");
						// $(".holy_container").append(data);
						$("#delModal").modal("hide");
					}
				});
			});
 	 });
 </script>
